<template>
	<div>
		<el-table :data="data.tableData" style="width: 100%" border @selection-change="tableCompon">
			<!-- 多选框 -->
			<el-table-column type="selection" width="55" v-if="data.tableConfig.selection" ></el-table-column>
			
			<template v-for="item in data.tableConfig.tHead">
				<!-- slot -->
				<el-table-column :key="item.field" :prop="item.field" :label="item.label" v-if="item.columnType==='slot'">
					<template slot-scope="scope">
						<slot :name='item.slotName' :data='scope.row'></slot>
					</template>
				</el-table-column>
				<!-- 文本数据渲染 -->
				<el-table-column :prop="item.field" :label="item.label" :key="item.field" :width="item.width" v-else>
				</el-table-column>

			</template>
		</el-table>
		<div class="table-footer">
			<el-row style='margin-top: 20px;'>
				<el-col :span="4">
					<slot name="tableFooter"></slot>
				</el-col>
				<el-col :span="20" >
					<el-pagination class='pull-right' @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageData.currentPage"
					 :page-sizes="pageData.pageSizes" :page-size="pageData.pageSize" :layout="pageData.layout" :total="pageData.total">
					</el-pagination>
				</el-col>
			</el-row>
		</div>


	</div>
</template>

<script>
	import {
		reactive,
		ref,
		onBeforeMount,
		watch,
		onUnmounted
	} from "@vue/composition-api";

	import {
		loadData
	} from './tableLoadData.js'
	import {
		pagination
	} from './paginationHook.js'
	import emitter from '@/utils/bus.js'
	export default {
		name: 'tableVue',
		props: {
			config: {
				type: Object,
				default: () => {}
			},
			deletData:{
				type:Object,
				default:()=>{}
			}
			
		},
		setup(props, {
			root,emit
		}) {
			// data
			const data = reactive({
				tableConfig: {
					tHead: [],
					selection: true,
					requestData: {}
				},
				tableData: []
			})
			// 加载数据
			const {
				tableData,
				tableLoadData
			} = loadData()
			// 页码
			const {
				pageData,
				handleSizeChange,
				handleCurrentChange,
				getInitData
			} = pagination()
			/* 方法methods */
			// 处理表头
			const initTableConfig = () => {
				let configData = props.config;
				for (let key in configData) {
					if (data.tableConfig.hasOwnProperty(key)) {
						data.tableConfig[key] = configData[key]
					}
				}
			}
			const tableCompon=(val)=>{
				const obj = props.deletData
				obj.id = val.map(item=>item.id)
				emit('update:deletData',obj)
			}
			
			// 监听 
			watch(
				[() => tableData.item, () => tableData.total], ([item, total]) => {
					data.tableData = item
					pageData.total = total

				})
			watch(() => data.tableConfig.requestData, (val) => {
				if (val) {
					getInitData(val)
				}
			})
			// 监听页数 --改变发送请求
			watch([() => pageData.currentPage, () => pageData.pageSize], ([currentPage, pageSize]) => {
				data.tableConfig.requestData.data.pageSize = pageSize
				data.tableConfig.requestData.data.pageNumber = currentPage
				tableLoadData(data)
			})
            // 更新数据 
			const updatas = () => { //因为卸载了 所以不能通过ref拿到
				tableLoadData(data)
			}
			const updataData = (params)=>{
				if(params){
					// 收索 
					const requestData = Object.assign({},params)
					requestData.pageSize = data.tableConfig.requestData.data.pageSize 
					requestData.pageNumber = data.tableConfig.requestData.data.pageNumber
					data.tableConfig.requestData.data= requestData
					console.log(data)
					tableLoadData(data)
					return
				}
				tableLoadData(data)
			}
			emitter.on('updata', updatas)
			onBeforeMount(() => {
				initTableConfig()
				// 处理 表格内容渲染
				tableLoadData(data)
			})
			onUnmounted(() => emitter.off('updata', updatas))
			return {
				data,
				pageData,
				handleSizeChange,
				handleCurrentChange,
				tableCompon,
				updataData
			}
		}
	}
</script>

<style>
</style>
